<wide-header-page title="{{'Transaction speed' | translate}}" hideBackButton="true">
  <ion-buttons left>
    <button class="close-container disable-hover" (click)="close()" ion-button>
      <ion-icon ios="md-close" md="md-close"></ion-icon>
    </button>
  </ion-buttons>
  
  <div page-content>
    <div class="testnet-warning" *ngIf="network!='livenet'">
      Testnet
    </div>
    <div *ngFor="let fee of feeOpts" class="fee-card" (click)="changeSelectedFee(fee.level)">
      <div class="fee-title">
        <div>
          <span class="fee-speed-name">{{ feeProvider.getFeeOpts()[fee.level] | translate }}</span>
          <span class="fee-speed-satByte">{{fee.feePerSatByte}} {{ feeUnit }}</span>
        </div>
        <div>
          <ion-icon *ngIf="fee.level === feeLevel" name="ios-checkmark-circle" class="fee-check success" item-right></ion-icon>
        </div>
      </div>
      <div>
        <span class="fee-avg-label" translate>Average confirmation time:</span>
        <span class="fee-avg-time">
          <span *ngIf="loadingFee">...</span>
          <span *ngIf="fee.avgConfirmationTime">
            {{ fee.avgConfirmationTime | amDuration: 'minute' }}
          </span>
        </span>
      </div>
    </div>
    <div class="fee-card">
      <ion-grid no-padding>
        <ion-row>
          <ion-col>
            <div class="fee-speed-name">{{ 'Custom fee' | translate }}</div>
          </ion-col>
          <ion-col text-right col-2>
            <ion-icon *ngIf="'custom' === feeLevel" name="ios-checkmark-circle" class="fee-check success" item-right></ion-icon>
          </ion-col>
        </ion-row>
        <ion-item no-margin no-padding>
          <ion-label padding-bottom stacked>{{'Enter custom fee in {feeUnit}' | translate: { feeUnit: feeUnit } }}:</ion-label>
          <ion-input type="number" min="minFee" max="maxFee" (ionChange)="checkFees(customSatPerByte)" [(ngModel)]="customSatPerByte" required></ion-input>
        </ion-item>
        <div class="fee-error" *ngIf="showError">
          <span translate>Transactions without fee are not supported.</span>
        </div>
        <div class="fee-error" *ngIf="showMinWarning || showMaxWarning" text-wrap>
          <span *ngIf="showMinWarning" translate>Your fee is lower than recommended.</span>
          <span *ngIf="showMaxWarning" translate>You should not set a fee higher than {{maxFeeRecommended}} {{feeUnit}}.</span>
        </div>
        <button class="apply-button" ion-button clear color="primary" (click)="setCustomFee()" [disabled]="!customSatPerByte || customSatPerByte >= maxFeeAllowed || showError">
          {{'Apply' | translate}}
        </button>
      </ion-grid>
    </div>
  </div>
</wide-header-page>